<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">就诊记录</view>
            <view class="right">
                <u-icon name="plus" size="32" color="#333" @click="addRecord"></u-icon>
            </view>
        </view>
        
        <!-- 筛选条件 -->
        <view class="filter">
            <view class="search">
                <u-icon name="search" size="32" color="#999"></u-icon>
                <input 
                    type="text" 
                    v-model="searchText" 
                    placeholder="搜索医院、科室、医生"
                    class="input"
                />
            </view>
            <view class="tabs">
                <view 
                    class="tab" 
                    v-for="(item, index) in tabs" 
                    :key="index"
                    :class="{'active': currentTab === item.value}"
                    @click="switchTab(item.value)"
                >
                    {{item.label}}
                </view>
            </view>
        </view>
        
        <!-- 记录列表 -->
        <scroll-view class="record-scroll" scroll-y @scrolltolower="loadMore">
            <view class="record-list">
                <view class="record-item" v-for="(item, index) in recordList" :key="index">
                    <view class="header">
                        <view class="time">{{item.time}}</view>
                        <view class="status" :class="item.status">{{item.statusText}}</view>
                    </view>
                    
                    <view class="content">
                        <view class="info">
                            <view class="hospital">{{item.hospital}}</view>
                            <view class="department">{{item.department}}</view>
                            <view class="doctor">{{item.doctor}}</view>
                        </view>
                        
                        <view class="diagnosis">
                            <view class="label">诊断：</view>
                            <view class="text">{{item.diagnosis}}</view>
                        </view>
                        
                        <view class="treatment">
                            <view class="label">治疗方案：</view>
                            <view class="text">{{item.treatment}}</view>
                        </view>
                        
                        <view class="images" v-if="item.images.length">
                            <image 
                                v-for="(img, idx) in item.images" 
                                :key="idx"
                                :src="img"
                                mode="aspectFill"
                                @click="previewImage(item.images, idx)"
                            ></image>
                        </view>
                    </view>
                    
                    <view class="footer">
                        <view class="actions">
                            <view class="action" @click="editRecord(item)">
                                <u-icon name="edit" size="24" color="#666"></u-icon>
                                <text>编辑</text>
                            </view>
                            <view class="action" @click="deleteRecord(item)">
                                <u-icon name="trash" size="24" color="#666"></u-icon>
                                <text>删除</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <u-loadmore status="loading" />
            </view>
            
            <!-- 无数据 -->
            <view class="empty" v-if="recordList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无就诊记录</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchText: '',
            tabs: [
                { label: '全部', value: 'all' },
                { label: '待复诊', value: 'pending' },
                { label: '已完成', value: 'completed' }
            ],
            currentTab: 'all',
            recordList: [],
            page: 1,
            hasMore: true
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        addRecord() {
            uni.navigateTo({
                url: '/pages/health/record-edit'
            })
        },
        switchTab(tab) {
            this.currentTab = tab
            this.page = 1
            this.hasMore = true
            this.loadRecords()
        },
        loadRecords() {
            // 模拟加载数据
            setTimeout(() => {
                const list = [
                    {
                        id: 1,
                        time: '2024-03-15',
                        status: 'completed',
                        statusText: '已完成',
                        hospital: '北京协和医院',
                        department: '神经内科',
                        doctor: '张医生',
                        diagnosis: '脑卒中后遗症',
                        treatment: '1. 继续服用阿司匹林\n2. 定期复查\n3. 保持适当运动',
                        images: [
                            '/static/images/record1.jpg',
                            '/static/images/record2.jpg'
                        ]
                    },
                    {
                        id: 2,
                        time: '2024-02-20',
                        status: 'pending',
                        statusText: '待复诊',
                        hospital: '北京协和医院',
                        department: '神经内科',
                        doctor: '李医生',
                        diagnosis: '高血压',
                        treatment: '1. 服用降压药\n2. 控制饮食\n3. 定期测量血压',
                        images: []
                    }
                ]
                
                if (this.page === 1) {
                    this.recordList = list
                } else {
                    this.recordList = [...this.recordList, ...list]
                }
                
                this.hasMore = this.page < 3
                this.page++
            }, 500)
        },
        loadMore() {
            if (!this.hasMore) return
            this.loadRecords()
        },
        editRecord(record) {
            uni.navigateTo({
                url: `/pages/health/record-edit?id=${record.id}`
            })
        },
        deleteRecord(record) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这条就诊记录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 删除记录
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    }
                }
            })
        },
        previewImage(images, current) {
            uni.previewImage({
                urls: images,
                current: current
            })
        }
    },
    onLoad() {
        this.loadRecords()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .filter {
        background-color: #fff;
        padding: 20rpx 30rpx;
        margin-bottom: 20rpx;
        
        .search {
            display: flex;
            align-items: center;
            background-color: #F7F7FA;
            border-radius: 30rpx;
            padding: 10rpx 20rpx;
            margin-bottom: 20rpx;
            
            .input {
                flex: 1;
                font-size: 28rpx;
                color: #333;
                margin-left: 10rpx;
            }
        }
        
        .tabs {
            display: flex;
            
            .tab {
                padding: 10rpx 20rpx;
                font-size: 28rpx;
                color: #666;
                margin-right: 20rpx;
                border-radius: 30rpx;
                
                &.active {
                    background-color: #E6F7FF;
                    color: #1890FF;
                }
            }
        }
    }
    
    .record-scroll {
        height: calc(100vh - 240rpx);
        
        .record-list {
            padding: 20rpx;
            
            .record-item {
                background-color: #fff;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                overflow: hidden;
                
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20rpx 30rpx;
                    border-bottom: 2rpx solid #F7F7FA;
                    
                    .time {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                    }
                    
                    .status {
                        font-size: 24rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 20rpx;
                        
                        &.pending {
                            background-color: #FFF7E6;
                            color: #FAAD14;
                        }
                        
                        &.completed {
                            background-color: #F6FFED;
                            color: #52C41A;
                        }
                    }
                }
                
                .content {
                    padding: 30rpx;
                    
                    .info {
                        margin-bottom: 20rpx;
                        
                        .hospital {
                            font-size: 32rpx;
                            color: #333;
                            font-weight: bold;
                            margin-bottom: 10rpx;
                        }
                        
                        .department,
                        .doctor {
                            font-size: 24rpx;
                            color: #666;
                            margin-bottom: 6rpx;
                        }
                    }
                    
                    .diagnosis,
                    .treatment {
                        display: flex;
                        margin-bottom: 20rpx;
                        
                        .label {
                            font-size: 28rpx;
                            color: #333;
                            font-weight: bold;
                            margin-right: 10rpx;
                        }
                        
                        .text {
                            flex: 1;
                            font-size: 28rpx;
                            color: #666;
                            line-height: 1.6;
                        }
                    }
                    
                    .images {
                        display: flex;
                        flex-wrap: wrap;
                        
                        image {
                            width: 160rpx;
                            height: 160rpx;
                            border-radius: 10rpx;
                            margin-right: 20rpx;
                            margin-bottom: 20rpx;
                        }
                    }
                }
                
                .footer {
                    padding: 20rpx 30rpx;
                    background-color: #F7F7FA;
                    
                    .actions {
                        display: flex;
                        justify-content: flex-end;
                        
                        .action {
                            display: flex;
                            align-items: center;
                            margin-left: 30rpx;
                            
                            text {
                                font-size: 24rpx;
                                color: #666;
                                margin-left: 6rpx;
                            }
                        }
                    }
                }
            }
        }
        
        .load-more {
            padding: 20rpx 0;
        }
        
        .empty {
            padding: 100rpx 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style> 